<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智能处理重点实验室设备管理系统-管理员登录</title>
		<link rel="stylesheet" type="text/css" href="../resource/css/animate/animate.min.css" />
		<script src="../resource/js/jquery.min.js"></script>
		<style type="text/css">
		body,html,b,h2{
			margin:0;
			padding:0;
		}
		#zong{
			/*width:auto;
            height:auto;*/
			width:100%;
			position:fixed;
			top:0;
			bottom:0;
			background-image: url(../resource/images/P22.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-color: rgba(55,55,55,0.8);
		}
		#loginkuang{
			height:400px;
			width:600px;
			position:relative;
			margin-left: 50%;
			left: -300px;
			background-color: rgba(255,255,255,0.5);
			box-shadow: 3px 3px 3px rgba(0,0,0,0.9);
			border-radius: 10px;
			/*margin-top: 10%;*/
			top:150px;
			/*animation-duration: 1.5s;*/
		}
		#logo{
			height:50px;
			width:225px;
			position: relative;
			top:70px;
			left:150px;
			/*background-color: rgba(0,0,0,0.5);*/
			line-height: 60px;
			color:#E6E6E6;
			font-family: "微软雅黑";
			font-size: 16px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(../resource/images/logo.png);
			text-align: center;
			font-weight: bold;
		}
		#biaoyu{
			height:50px;
			width:225px;
			position:fixed;
			bottom: 20px;
			right: 20px;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url(../resource/images/biaoyu.png);
		}
		#title{
			width:auto;
			height:50px;
			/*background-color: rgba(0,0,0,0.55);*/

			border-radius: 10px 10px 0 0;
			font-size: ;
		}
		#title > h2{
			font-family: "arial rounded mt bold";
			font-size: 20px;
			color:#E2E6EA;
			line-height: 60px;
			width:300px;
			display: inline-block;
			background-color: rgba(0,0,0,0.7);
			border-radius: 10px 0 0 0;

		}
		#title> b{
			display: inline-block;
			float:right;
			line-height: 60px;
			color:#6C757D;
			font-size: 12px;
			/*background-color: rgba(255,255,255,0.5);*/
			margin-right: 10px;

		}
		#sname{
			width:400px;
			height:50px;
			background-color: rgba(0,0,0,0.5);
			position: relative;
			right:30px;
		}
		#tips{
			color:#6C757D;
			font-size: 10px;
			/*background-color: rgba(255,255,255,0.5);*/
			position: relative;
			left: 35px;
			top:70px;
		}
		#inf{
			position: relative;
			top:80px;
			/*background-color: rgba(0,0,0,0.5);*/
			/*text-align:center;*/
		}
		#inf > form > dl{
			/*margin-left: -80px;*/
			color: #737383;
			font-size: 12px;
			float:left;
			margin-bottom: 10px;
			/*background-color: rgba(0,0,0,0.8);*/
			margin-left: 30px;
		}
		#inf  form  dl dt{
			/*margin-left: -165px;*/
			margin-left: 30px;
			margin-bottom: 10px;
			float: left;
		/*	background-color: #EFEFF4;*/
			
            
		}
		#inf form dl dd{
			position: relative;
			margin-left: 30px;
		}
		
		#inf input{
			cursor: pointer;
			width:200px;
			height:25px;
			/*border:solid 1px #6C757D;*/
			border: 0px;
			background-color: #EFEFF4;
			border-radius: 15px;
			outline:none;
			padding-left: 10px;
			box-shadow: 2px 2px 3px rgba(0,0,0,0.8);
		}

		input#sub:hover{
			background: rgba(0,0,0,0.9) !important;

		}
		#msg{
			position: absolute;
			width:250px;
			height:30px;
			border-radius: 15px;
			/*background: #000000;*/
			bottom: -10px;
			right:60px;
			text-align: right;
			color:#DC3545;
			line-height: 30px;
			font-size: 12px;
			font-family: "微软雅黑";
		}
		#xiacolor{
			position: absolute;
			bottom: 125px;
			left: 0;
			width:600px;
			height:200px;
			background-color: rgba(0,0,0,0.5);
		}
		#titleb{
			display: inline-block;
			
			line-height: 30px;
			color:#4E555B;
			font-size: 12px;
			font-weight: bold;
			position:absolute;
			bottom:10px;
			/*background-color: rgba(255,255,255,0.5);*/
			right:20px;
		}
	</style>
	<script type="text/javascript">
		
		window.onload = function() {
			
			$(document).keydown(function(event){
				
				if(event.keyCode==13){
					$("#sub").click();
				}
				
			})
			
			
			document.querySelector("#sub").onclick = function(){
				var username=document.querySelector("#user").value;
				var passwd=document.querySelector("#pass").value;
				
				if(username==""||passwd==""){
//					alert("bunengweikunag");
//					console.log(passwd);
//					return;
					var msg=document.getElementById("msg");
//					var tips="用户名或者密码不能为空！";
					msg.classList.add("animated","bounceIn");
					msg.innerText="×用户名或者密码不能为空！";
//					alert("bunengweikunag");
				}else{
					document.getElementById("form1").submit();
				}
			}
		}
	</script>
	
	
	
	</head>
	<body>
	<div id="zong">
		<div id="logo"></div>
		<!--<div id="sname"></div>-->
		<div id="loginkuang" class="animated bounce">
			<!--<div id="xiacolor"></div>-->
			<div id="title">
				<h2>&nbsp;&nbsp;&nbsp;&nbsp;LOGIN-administrator</h2>
				<b></b>
			</div>
			<div id="tips">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Please input validation information.</div>
			<div id="inf">
				<form id="form1" name="login" action="/login/admin" method="POST">
					<dl>
						<dt>职工号:</dt>
						<dd><input id="user" type="text" value="" name="username" placeholder=" name..."/></dd>
					</dl>
					<dl>
						<dt>密码:</dt>
						<dd><input id="pass" type="password" value="" name="password" placeholder=" password..."/></dd>
					</dl>
					<dl>
						<dt>记住密码:</dt>
						<dd><input style="width: 15px; height:15px; border-radius: 50%; display: inline-block; position: relative; top:-28px; left: 60px;" type="checkbox" value=""/></dd>
					</dl>
	
					<input id="sub" type="button" value="登录" style="clear: both; color:#E2E2E2; width:480px; height:27px; background:rgba(0,0,0,0.7); border:0; line-height: 27px; position: relative; top:50px; left:-50px;"/>
					<span id="msg" th:text="${msg}"></span>
					
				</form>
			</div>
			<div id="titleb">equipment-management-system</div>
		</div>
		<div id="biaoyu"></div>
	</div>
		
		
	</body>
</html>
